<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 400px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .big {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        
        .big img {
            position: absolute;
        }
        
        .mask {
            width: 150px;
            height: 150px;
            background: rgba(100, 100, 0, 0.116);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }
        
        .small {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="small">
            <img src="img/aw.jpg" width="300" alt="" />

            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="img/aw.jpg" width="600" height="1000" alt="" />
        </div>
    </div>
    <script>
        var box = document.getElementById('box');
        var smallBox = box.children[0];
        var bigBox = box.children[1];
        var smallImage = smallBox.children[0];
        var mask = smallBox.children[1];
        var bigImage = bigBox.children[0];
        // 放大镜原理超级剖析。
        // 第一步，当鼠标经过box时，mask和bigBox同时显示，离开时同时隐藏
        smallBox.onmouseenter = function() {
            mask.style.display = 'block';
            bigBox.style.display = 'block';
        }
        smallBox.onmouseleave = function() {
                mask.style.display = 'none';
                bigBox.style.display = 'none';
            }
            // 第二步，当鼠标在smallBox移动时。鼠标和mask同时移动，并且鼠标在mask的中心。
        box.onmousemove = function(e) {
            e = e || window.event;
            // 鼠标在盒子中的位置，就是 鼠标在网页中位置 - 盒子的offsetleft
            var maskX = e.pageX - box.offsetLeft;
            var maskY = e.pageY - box.offsetTop;
            // 将鼠标放在mask的中心
            maskX = maskX - mask.offsetWidth / 2;
            maskY = maskY - mask.offsetHeight / 2;
            // 将mask限制的box里。
            // 最左端
            maskX = maskX < 0 ? 0 : maskX;
            maskY = maskY < 0 ? 0 : maskY;
            //最右端  盒子的宽 - mask的宽就是最大允许的。
            maskX = maskX > box.offsetWidth - mask.offsetLeft ? box.offsetWidth - mask.offsetLeft : maskX;
            maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY;
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            // 第三步，让bigBox里的内容与mask里的内容同步。
            // 关键的理解点就是
            // mask移动的距离 / mask最大能够移动的距离  = 大图片移动的距离 / 大图片最大能够移动的距离
            // mask最大能移动的距离
            var maskMaxX = box.offsetWidth - mask.offsetWidth;
            var maskMaxY = box.offsetHeight - mask.offsetHeight;
            // 大图片最大能移动的距离
            var bigImageMaxX = bigImage.offsetWidth - box.offsetWidth;
            var bigImageMaxY = bigImage.offsetHeight - box.offsetHeight;
            // 所以大图片移动的距离 = mask移动的距离*大图片最大的/mask最大的
            var bigImageX = maskX * bigImageMaxX / maskMaxX;
            var bigImageY = maskY * bigImageMaxY / maskMaxY;

            //赋值就好啦。
            bigImage.style.left = -bigImageX + 'px';
            bigImage.style.top = -bigImageY + 'px';
        }
    </script>
</body>

</html>